<template>
  <div>
    <div class="abc"></div>
    <p></p>
    <HmHeader></HmHeader>
    <hm-header></hm-header>
    <HmHeader />
    <HmButton></HmButton>
    <HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton
    ><HmButton></HmButton><HmButton></HmButton><HmButton></HmButton>
  </div>
</template>

<script>
// 导入的时候要用驼峰式写法，但是在模板中使用的时候有两种写法 没有区别
// 字下美元数骆驼

// 全局组件 局部组件
// 局部组件在使用的时候必须在当前.vue文件中注册才能使用
// 全局组件 可以直接用 不用在当前.vue文件中注册
import HmHeader from "./components/hm-header.vue";
export default {
  data() {
    return {};
  },
  components: {
    HmHeader,
  },
};
</script>

<style scoped>
.abc {
  color: red;
  width: 200px;
  height: 200px;
  background-color: blue;
}
</style>
